<template>
  <div class="xiangqing">
    <!-- 头部导航栏 -->
    <van-nav-bar
      fixed
      placeholder
      :title="goodsData.goodsTitle"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <div class="good_list">
      <!-- 商品info信息 -->
      <div class="goodsinfo_box">
        <div class="goodsinfo_top_box">
          <!-- 商品头部 -->
          <div class="goodsinfo_top dislay-flex">
            <div class="goodsinfo_top_left">
              <!-- 头像 -->
              <img :src="userQurl" />
            </div>
            <div class="goodsinfo_top_middle">
              <div class="goodsinfo_top_middle_name">
                <!-- nickname -->
                <span class="left">{{ username }}</span>
                <span class="right">未实名</span>
              </div>
            </div>
            <div class="goodsinfo_add_time">
              <span class="right">{{ goodsData.addTime }}</span>
            </div>
          </div>
          <!-- 价格区域 -->
          <div class="price dislay-flex">
            <div class="price_left">
              <span class="yijia">{{ goodsData.price }}</span>
            </div>
            <div class="price_right">
              <span class="market_price">原价￥{{ goodsData.market }}</span>
            </div>
          </div>
        </div>
        <!-- 轮播图 -->
        <div class="swiper_box">
          <!-- :autoplay="3000" -->
          <van-swipe :autoplay="3000">
            <van-swipe-item
              v-for="(image, index) in xqPic"
              :key="index"
              @click="picOnclik(index)"
            >
              <img v-lazy="image" />
            </van-swipe-item>
          </van-swipe>
        </div>
        <!-- 内容区域 -->
        <van-divider>详细介绍</van-divider>
        <div class="goodsinfo_content">
          <div>{{ goodsData.content }}</div>
        </div>
        <!-- 其他信息 -->
        <div class="goodsinfo_address dislay-flex">
          <div class="goodsinfo_address_left">
            <span class="address_middle">地址：{{ goodsData.address }}</span>
          </div>
          <div class="clicks">
            <span class="left">浏览</span>
            <span class="right">{{ goodsData.clicks }}</span>
          </div>
        </div>
      </div>
      <!-- 担保交易 -->

      <div class="goodsinfo_bottom" @click="danbaoClick">
        <div class="goodsinfo_bottom_left">
          <div class="goodsinfo_bottom_left_top dislay-flex">
            <div class="goodsinfo_bottom_left_top_left">
              <em class="tciconfont tcicon-danbao"></em>
              <span>担保交易</span>
            </div>
          </div>
          <div class="goodsinfo_bottom_left_bottom">
            <span>如果您的物品需要线上物流，且不放心资金安全时</span>
            <span class="xq_btn">详情</span>
          </div>
          <i></i>
        </div>
      </div>

      <!-- 发布人信息 -->
      <section class="goodsinfo-item">
        <div class="info-item-ly">
          <div class="ly-content">
            <p>联系人：{{ goodsData.xm }}</p>
            <p class="import tc-template__color">
              联系时请告知在汤臣亿品上面看到的
            </p>
          </div>
          <div class="ly-right2">
            <!-- 微信 -->
            <a
              :data-clipboard-text="goodsData.wx"
              class="id-show__wx"
              href="javascript:void(0);"
              @click="weixinClick"
            ></a>
          </div>
          <div class="ly-right">
            <a
              :data-clipboard-text="goodsData.qq"
              href="javascript:void(0);"
              class="id-show__qq"
              @click="qqClick"
            ></a>
          </div>
        </div>
      </section>
      <!-- 举报 -->
      <section class="goodsinfo-item">
        <div class="info-item-ly">
          <div class="jubao-content flex">
            <p class="title tc-template__color">
              如遇无效、虚假、诈骗信息，请立即举报
            </p>
            <p class="desc">为了您的资金安全，请在平台交易，请勿私下转账</p>
          </div>
          <a href="javascript:;" @click="jubaoClick">
            <div class="jubao-right">
              <div class="ico">
                <img src="./img/jubao_ico.png" width="30" height="28" />
              </div>
              <div class="btn">举报</div>
            </div>
          </a>
        </div>
      </section>
      <!-- 发布人条数跳转 -->
      <section class="goodsinfo-item">
        <div class="info-item-fbr clearfix">
          <div class="fbr-avatar">
            <img class="avatar" :src="userQurl" />
          </div>
          <div class="fbr-content">
            <div class="fbr-name">{{ username }} <i></i></div>
            <div class="fbr-count">发布2条</div>
          </div>
        </div>
      </section>
    </div>

    <!-- 底部导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="home-o" text="首页" to="/" />
      <van-goods-action-icon icon="chat-o" text="客服" @click="onClicklianxi" />
      <van-goods-action-button
        type="danger"
        text="立即咨询"
        color="#be99ff"
        @click="onClickButton"
      />
    </van-goods-action>

    <!-- 客服弹出面板 -->

    <van-dialog v-model="show" title="联系客服" show-cancel-button>
      <div class="tanchu">
        <div class="ly-right2">
          <!-- 微信 -->
          <a href="javascript:void(0);"></a>
          <button
            @click="weixinClick"
            class="weixinKefu id-show__wx"
            data-clipboard-text="lxx_bbs"
          >
            复制微信号
          </button>
        </div>
        <div class="ly-right">
          <a href="javascript:void(0);" @click="onClickKefu"></a>
          <button
            @click="qqClick"
            class="QQaKefu id-show__qq"
            data-clipboard-text="418005852"
          >
            复制QQ号
          </button>
        </div>
      </div>
      <van-divider>点击QQ图标直接跳转</van-divider>
    </van-dialog>

    <!-- 咨询弹窗 -->
    <van-dialog v-model="zixunDao" title="咨询用户" show-cancel-button>
      <div class="zixunt clearfix">
        <div class="ly-right2">
          <!-- 微信 -->
          <a
            :data-clipboard-text="goodsData.wx"
            class="id-show__wx"
            href="javascript:void(0);"
            @click="weixinClick"
          ></a>
        </div>
        <div class="ly-right">
          <a
            :data-clipboard-text="goodsData.qq"
            href="javascript:void(0);"
            class="id-show__qq"
            @click="qqClick"
          ></a>
        </div>
      </div>
      <van-divider
        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
      >
        点击图标复制
      </van-divider>
    </van-dialog>
  </div>
</template>

<script>
import Clipboard from "clipboard";
import { Dialog } from "vant";
import { Toast } from "vant";
Vue.use(Toast);
import Vue from "vue";
import { Step, Steps } from "vant";

Vue.use(Step);
Vue.use(Steps);
import { Lazyload } from "vant";
import { ImagePreview } from "vant";
Vue.use(Lazyload);
export default {
  name: "goodIt",

  components: {},

  directives: {},

  data() {
    return {
      show: false,
      zixunDao: false,
      xqPic: [],
      goodsData: {},
      userid: "",
      username: "",
      userQurl: "",
    };
  },
  mounted() {},
  created() {
    this.getPicxq(this.$route.params.id, 2);
    this.goodsData = this.$route.query.data;
    this.userid = this.$route.query.data.userId;
    this.getUsername(this.userid);
  },
  methods: {
    getUsername(userId) {
      let that = this;
      $.ajax({
        type: "get",
        url: `http://121.4.40.144/api/user/${userId}`,
        dataType: "json",
        contentType: "application/json",
        beforeSend: function (request) {
          request.setRequestHeader("token", localStorage.getItem("token"));
        },
        success: function (res) {
          //console.log(res);
          let qq = res.data.email.split("@")[0];
          that.userQurl = `https://thirdqq.qlogo.cn/g?b=qq&nk=${qq}&s=100`;
          that.username = res.data.userName;
        },
      });
    },
    // 预览图片
    picOnclik(index) {
      ImagePreview({
        images: this.xqPic,
        startPosition: index,
      });
    },
    // 担保交易
    danbaoClick() {
      Dialog({
        title: "担保交易",
        message: `
      <img src="http://r.photo.store.qq.com/psc?/V52eC8XA0zvIzo3ZC9ch0BpIJX3HA3ZP/TmEUgtj9EK6.7V8ajmQrEFzlaroh3Ml.KIPxfK8eMdElpjA3jUuYA712jz*lKf8TxSodUwn4UNFB5NMBYrHfMTMxpokHyVe6AL6UDilRDcc!/r" style="
    width: 100%;
" />
        `,
      });
    },

    // 点击微信图标
    weixinClick() {
      var clipboard = new Clipboard(".id-show__wx");
      clipboard.on("success", (e) => {
        Toast.success("复制微信号成功");
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        Toast.fail("复制微信号错误");
        // 释放内存
        clipboard.destroy();
      });
    },
    qqClick() {
      var clipboard = new Clipboard(".id-show__qq");
      clipboard.on("success", (e) => {
        Toast.success("复制QQ号成功");
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        Toast.fail("复制QQ号错误");
        // 释放内存
        clipboard.destroy();
      });
    },
    // 举报
    jubaoClick() {
      Dialog({
        title: "举报步骤",
        message: `
      <h3>截图保留，截图中包含标题等信息
      举报核实将颁发小勋章一枚
      （虚拟）</h3>
      <h4>↓↓↓点击下方发送给客服↓↓↓</h4>
      
      `,
      });
    },
    // 客服
    onClickKefu() {
      var qq = 418005852;

      var u = navigator.userAgent;

      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

      if (isiOS) {
        if (u.toLowerCase().match(/MicroMessenger/i) == "micromessenger") {
          window.open(
            "http://wpa.qq.com/msgrd?v=3&uin=" + qq + "&site=qq&menu=yes"
          );
        } else {
          window.open(
            "mqqwpa://im/chat?chat_type=wpa&uin=" +
              qq +
              "&version=1&src_type=web&web_src=cmgytt.top"
          );
        }
      } else {
        if (u.toLowerCase().match(/MicroMessenger/i) == "micromessenger") {
          window.open(
            "http://wpa.qq.com/msgrd?v=3&uin=" + qq + "&site=qq&menu=yes"
          );
        } else {
          window.open(
            "mqqwpa://im/chat?chat_type=wpa&uin=" +
              qq +
              "&version=1&src_type=web&web_src=cmgytt.top"
          );
        }
      }
    },
    onClicklianxi() {
      this.show = true;
    },
    // 资讯
    onClickButton() {
      this.zixunDao = true;
    },
    // 获取图片
    async getPicxq(goodsId, type) {
      const { data: res } = await this.$http.get(
        `/api/photo/${goodsId}/${type}`
      );
      ////console.log(res);
      for (let i = 0; i < res.data.length; i++) {
        this.xqPic.push(res.data[i].phoUrl);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.xiangqing {
  font-size: 16px;
}
.weixinKefu {
  display: inline-block;
  width: 86px;

  padding: 4px;
  border-radius: 10px;
  position: absolute;
  right: 126px;
  top: 59px;
  font-size: 14px;
  color: #fff;
  background-color: #1296db;
}
.QQaKefu {
  display: inline-block;
  width: 86px;
  padding: 4px;
  border-radius: 10px;
  position: absolute;
  right: 126px;
  top: 110px;
  font-size: 14px;
  color: #fff;
  background-color: #1296db;
}
.content {
  text-align: center;
  padding: 10px 0px;
}
.goodsinfo_box {
  padding: 10px 15px 5px 15px;
  background: #fff;
  font-size: 16px;
}
.dislay-flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.goodsinfo_top {
  padding-bottom: 15px;
}
.goodsinfo_box .goodsinfo_top .goodsinfo_top_middle {
  flex: 1;
  padding-left: 10px;
}
.goodsinfo_box .goodsinfo_top .goodsinfo_add_time {
  color: #b2b2b2;
  padding-top: 10px;
}
.goodsinfo_top_left img {
  width: 35px;
  height: 35px;
  border-radius: 60px;
}
.goodsinfo_top_middle_name {
  padding: 10px 0;
  font-size: 14px;
}
span.left {
  font-size: 1.15em;
}
.goodsinfo_top_middle_name span.right {
  padding: 0px 5px;
  border: 1px solid #06c1ae;
  border-radius: 8px;
  color: #06c1ae;
  font-size: 14px;
  margin-left: 10px;
}
.goodsinfo_box .price {
  color: red;
  padding-bottom: 15px;
}
.price_right {
  padding: 10px 0 0 10px;
  font-size: 14px;
}
span.yijia {
  font-size: 1.2em;
  line-height: 25px;
}
.price span.market_price {
  color: #b2b2b2;
  text-decoration: line-through;
}
.goodsinfo_content {
  line-height: 20px;
  padding: 10px 0;
}
.goodsinfo_pic {
  text-align: center;
  padding: 10px 0 5px 0;
}
img {
  border: 0;
}
img {
  max-width: 100%;
}
.goodsinfo_address {
  line-height: 20px;
  color: #888888;
  font-size: 14px;
  padding: 10px 0 5px 0;
}
.goodsinfo_address_left {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clicks {
  color: #929292;
  font-size: 12px;
  padding-left: 10px;
}
.clicks span {
  color: #929292;
}
// .swiper_box {
//   width: 100%;
//   // margin: 0px 10px;
//   border-radius: 10px;
//   overflow: hidden;
// }
.van-swipe {
  border-radius: 10px;
  img {
    width: 100%;
    height: 280px;
    border-radius: 10px;
  }
}
.goodsinfo_bottom {
  cursor: pointer;
  margin-top: 8px;
  position: relative;
  padding: 10px 15px;
  border-top: 1px solid #f3f3f3;
  background: #fff;
}
.goodsinfo_bottom .goodsinfo_bottom_left {
  flex: 1;
}
.dislay-flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.goodsinfo_bottom_left .goodsinfo_bottom_left_bottom {
  color: #929292;
  font-size: 0.8em;
  padding-top: 8px;
  line-height: 15px;
}
.goodsinfo_bottom_left .goodsinfo_bottom_left_top_left {
  flex: 1;
}
.goodsinfo_bottom_left_top_left span {
  color: #06c1ae;
}
.goodsinfo_bottom_left_bottom span.xq_btn {
  font-size: 1.2em;
  position: absolute;
  right: 30px;
  top: 25px;
  color: #bfbfbf;
}

.goodsinfo_bottom i {
  display: inline-block;
  height: 7px;
  width: 7px;
  border-width: 1px 1px 0 0;
  border-color: #bfbfbf;
  border-style: solid;
  -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: relative;
  top: -2px;
  position: absolute;
  top: 33%;
  margin-top: 8px;
  right: 18px;
}
.goodsinfo-item {
  background: #fff;
  margin: 8px 0;
}
.goodsinfo-item .info-item-ly {
  padding: 5px 15px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.goodsinfo-item .info-item-ly .ly-content {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}
.info-item-ly .ly-content p {
  height: 25px;
  line-height: 25px;
  overflow: hidden;
}
.info-item-ly .ly-content p {
  height: 25px;
  line-height: 25px;
  overflow: hidden;
}
.info-item-ly .ly-right2 {
  float: right;
  width: 40px;
  height: 50px;
}
.info-item-ly .ly-right2 a {
  display: block;
  height: 50px;
  background: url("./img/icon_weichat.png") no-repeat center;
  background-size: 30px auto;
}
.info-item-ly .ly-right {
  float: right;
  width: 40px;
  height: 50px;
}
.info-item-ly .ly-right a {
  display: block;
  height: 50px;
  background: url("./img/icon_QQ.png") no-repeat center;
  background-size: 30px auto;
}

.tanchu .ly-right2 {
  padding-left: 20px;
  width: 40px;
  height: 50px;
}
.tanchu .ly-right2 a {
  display: inline-block;
  width: 40px;
  height: 50px;
  background: url("./img/icon_weichat.png") no-repeat center;
  background-size: 40px auto;
}
.tanchu .ly-right {
  padding-left: 20px;

  width: 40px;
  height: 50px;
}
.tanchu .ly-right a {
  display: inline-block;
  width: 40px;
  height: 50px;
  background: url("./img/icon_QQ.png") no-repeat center;
  background-size: 40px auto;
}
.zixunt {
  margin: 10px 0px;
}
.zixunt .ly-right2 {
  margin-left: 100px;

  float: left;
  width: 40px;
  height: 50px;
}
.zixunt .ly-right2 a {
  display: block;
  height: 50px;
  background: url("./img/icon_weichat.png") no-repeat center;
  background-size: 40px auto;
}
.zixunt .ly-right {
  margin-right: 100px;

  float: right;
  width: 40px;
  height: 50px;
}
.zixunt .ly-right a {
  display: block;
  height: 50px;
  background: url("./img/icon_QQ.png") no-repeat center;
  background-size: 40px auto;
}
.tc-template__color {
  color: #03b2ee !important;
}
.info-item-ly .jubao-right {
  margin-left: 10px;
  width: 40px;
  height: 48px;
}
.info-item-ly .jubao-right .ico {
  width: 30px;
  height: 28px;
  margin-left: 5px;
}
.info-item-ly .jubao-right .btn {
  width: 40px;
  height: 20px;
  line-height: 20px;
  font-size: 0.8em;
  text-align: center;
  color: #57b6e7;
}
.info-item-ly .jubao-content .title {
  color: #ff7f00;
  height: 25px;
  line-height: 25px;
  overflow: hidden;
}
.jubao-content .desc {
  font-size: 0.8em;
  color: #989694;
  min-height: 20px;
  line-height: 16px;
}
.goodsinfo-item .info-item-fbr {
  padding: 5px 15px;
}
.info-item-fbr .fbr-avatar {
  width: 50px;
  height: 50px;
  position: relative;
  float: left;
  margin-top: 3px;
}
.clearfix:after {
  content: " ";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}
.fbr-avatar .avatar {
  height: 100%;
  width: 100%;
  border-radius: 100%;
}

.info-item-fbr .fbr-content {
  position: relative;
  float: left;
  width: calc(100% - 60px);
  // width: -webkit-calc(100% - 60px);
  margin-left: 10px;
  color: black;
}
.info-item-fbr .fbr-content .fbr-name {
  min-height: 25px;
  line-height: 25px;
  font-size: 1em;
  position: relative;
  margin-top: 4px;
}
.goodsinfo-item .info-item-fbr .fbr-content .fbr-name i {
  display: inline-block;
  height: 10px;
  width: 10px;
  border-width: 2px 2px 0 0;
  border-color: #c8c8cd;
  border-style: solid;
  -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: relative;
  top: -2px;
  position: absolute;
  top: 38%;
  margin-top: 8px;
  right: 2px;
}
.fbr-content .fbr-count {
  font-size: 0.9em;
  color: #a7a7a7;
  line-height: 20px;
  height: 25px;
}
.good_list {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 50px;
  top: 50px;
  overflow-y: auto;
}
.van-goods-action {
  height: 60px;
}
/deep/.van-goods-action-icon__icon {
  font-size: 22px;
}
</style>